<template>
    <view class="task-item-list">
        <view class="cu-list">
            <view class="cu-item solid-bottom" v-for="item in task_items" :key="item.id">
                <text class="cuIcon-circle text-blue"></text>
                {{ item.content }}
            </view>
        </view>
    </view>
</template>

<script>
import BaseMixin from '../../mixins/BaseMixin.js';
import uniIcons from '../../components/uni-icons/uni-icons.vue';
import TaskItem from './task-item';

export default {
    components: { TaskItem },

    mixins: [BaseMixin],

    data() {
        return {
            task: {},

            task_items: [],

            done_item_ids: [],

            item_content: ''
        };
    },

    computed: {
        task_id() {
            return this.$store.state.todo.task_id;
        }
    },

    methods: {
        get_task() {
            if (!this.task_id) return;

            this.get(`/todo_tasks/${this.task_id}`).then(task => {
                this.task = task;
            });
        },

        get_task_items() {
            if (!this.task_id) return;
            this.get('/todo_items/', { todo_task_id: this.task_id }).then(res => {
                this.task_items = res;
            });
        },

        add_task_item() {
            if (!this.item_content) return;
            this.post('/todo_items/', { task_id: this.task_id, content: this.item_content, is_done: false }).then(task => {
                this.task_items.push(task);
                this.item_content = '';
            });
        },

        taskCreated(task) {},

        checkbox_change(item) {
            item.is_done = !item.is_done;
            this.update_task_item(item); // 更新后台数据
            this.$forceUpdate();
        },

        // 获取变化的数据id和是否已完成
        get_changed_item(values) {
            const vm = this;
            let id = null;
            if (this.done_item_ids.length > values.length) {
                id = this.done_item_ids.filter(item_id => !values.includes(item_id))[0];
            } else {
                id = values.filter(value => !vm.done_item_ids.includes(value))[0];
            }

            return this.task_items.find(item => item.id == id);
        },

        update_task_item(item) {
            this.put(`/todo_items/${item.id}/`, item).then(res => {});
        }
    },

    onLoad(option) {
        //option为object类型，会序列化上个页面传递的参数
        this.$store.dispatch('todo/set_task_id', option.id || null);
        // 测试
        this.$store.dispatch('todo/set_task_id', 25);
        // this.get_task();
        // this.get_task_items();
    }
};
</script>

<style scoped lang="scss">
.task-item-list {
}
</style>
